<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="./css/mui-icons-extra.css" />
    <link href="css/mui.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
    <div class="mui-content">
        <div class="mui-content-padded">
            <div class="top_b" style="font-size: 14px;justify-content: center;">
                <div class="active_2">新品秀</div>
                <div>玩转VMALL</div>
                <div> 玩机技巧</div>
                <div>推荐</div>
            </div>

            <div class="mybox">
                <video src="./images/video1.mp4"></video>
                <p class="mypo">
                    华为开发者大会（HDC 2024）主题演讲
                </p>
            </div>
            <!-- 加载 -->
            <div class="mybox myboxlist">
                <div>
                    <h3>
                        问界 新M7 Ultra 超凡发布会
                    </h3>
                </div>

                <div class=" myboxlist2">
                    <div style="width: 120px;height: 120px;">
                        <video src="./images/video1.mp4"></video>
                    </div>
                    <div>
                        <h4>问界 新M7 Ultra 超凡发布会全程回顾</h4>
                        <div class="content" style="margin-top: 50px;">
                            <span>
                                华为商城
                            </span>
                            <span>
                                140.1万
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <br>
            <div class="mybox myboxlist">
                <div>
                    <h3>
                        问界 新M7 Ultra 超凡发布会
                    </h3>
                </div>

                <div class=" myboxlist2">
                    <div style="width: 120px;height: 120px;">
                        <video src="./images/video1.mp4"></video>
                    </div>
                    <div>
                        <h4>问界 新M7 Ultra 超凡发布会全程回顾</h4>
                        <div class="content" style="margin-top: 50px;">
                            <span>
                                华为商城
                            </span>
                            <span>
                                140.1万
                            </span>
                        </div>
                    </div>
                </div>
                <div class=" myboxlist2">
                    <div style="width: 120px;height: 120px;">
                        <video src="./images/video1.mp4"></video>
                    </div>
                    <div>
                        <h4>问界 新M7 Ultra 超凡发布会全程回顾</h4>
                        <div class="content" style="margin-top: 50px;">
                            <span>
                                华为商城
                            </span>
                            <span>
                                140.1万
                            </span>
                        </div>
                    </div>
                </div>
                <div class=" myboxlist2">
                    <div style="width: 120px;height: 120px;">
                        <video src="./images/video1.mp4"></video>
                    </div>
                    <div>
                        <h4>问界 新M7 Ultra 超凡发布会全程回顾</h4>
                        <div class="content" style="margin-top: 50px;">
                            <span>
                                华为商城
                            </span>
                            <span>
                                140.1万
                            </span>
                        </div>
                    </div>
                </div>
                <div class=" myboxlist2">
                    <div style="width: 120px;height: 120px;">
                        <video src="./images/video1.mp4"></video>
                    </div>
                    <div>
                        <h4>问界 新M7 Ultra 超凡发布会全程回顾</h4>
                        <div class="content" style="margin-top: 50px;">
                            <span>
                                华为商城
                            </span>
                            <span>
                                140.1万
                            </span>
                        </div>
                    </div>
                </div>
                <div class=" myboxlist2">
                    <div style="width: 120px;height: 120px;">
                        <video src="./images/video1.mp4"></video>
                    </div>
                    <div>
                        <h4>问界 新M7 Ultra 超凡发布会全程回顾</h4>
                        <div class="content" style="margin-top: 50px;">
                            <span>
                                华为商城
                            </span>
                            <span>
                                140.1万
                            </span>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .mybox {
            background-color: #fff;
            overflow: hidden;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .mybox video {
            width: 100%;
        }

        .mypo {
            font-size: 12px;
            padding: 0 10px;
        }

        .myboxlist2 {
            display: flex;
            gap: 10px;
            height: 100px;
            width: 96%;
            margin: 10px auto;
            border-radius: 20px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            overflow: hidden;
            box-sizing: border-box;
        }

        .myboxlist h3 {
            font-size: 16px;
            padding: 10px;
        }

        .myboxlist h4 {
            font-size: 12px;
        }

        .myboxlist .content {
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }

        .myboxlist2 video {
            height: 100%;
            width: 100%;
            object-fit: fill;
        }
    </style>
    <!-- tab -->
    <nav class="mui-bar mui-bar-tab"
        style="display: flex;height: 60px;justify-content: space-around;align-items: center;">
        <a href="./home.html" style="text-align: center;vertical-align: middle;">
            <img src="./images/daohang/pic1.jpg" alt="" width="30" />
            <div style="color: #000;font-size: 12px;transform: translateY(-5px);">首页</div>
        </a>
        <a href="./cate.html" style="text-align: center;">
            <img src="./images/daohang/pic2.jpg" alt="" width="30" />
            <div style="color: #000;font-size: 12px;transform: translateY(-5px);">分类</div>
        </a>
        <a href="./find.html" style="text-align: center;">
            <img src="./images/daohang/find.png" alt="" width="30" />
            <div style="color: #000;font-size: 12px;transform: translateY(-5px);">发现</div>
        </a>
    
        <a href="./shop.html" style="text-align: center;">
            <img src="./images/daohang/pic3.jpg" alt="" width="30" />
            <div style="color: #000;font-size: 12px;transform: translateY(-5px);">购物车</div>
        </a>
        <a href="./my.html" style="text-align: center;">
            <img src="./images/daohang/pic4.jpg" alt="" width="30" />
            <div style="color: #000;font-size: 12px;transform: translateY(-5px);">我的</div>
        </a>
    </nav>

    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/mui.js"></script>
    <script src="./json/data.js"></script>
    <script type="text/javascript">
        mui.init()
        mui.ready(function () {

            // 渲染商品列表
            data.forEach((item, i) => {
                $(".main-live").append(`
						<div class="main-sp" id=${item.id} style="width:50%">
						    <img src="./images/live/live0${i + 1}.png" alt="">
						    <div class="main-sps">
						        <div class="main-sps1">
									${item.xps}
						        </div>
						        <div class="main-sps2">${item.sps2}</div>
						    </div>
						    <div class="main-rmb">
						        <div class="main-rmbr">￥</div>
						        <div>${item.price}</div>
						        <div class="main-rr">￥3499</div>
						    </div>
						</div>
					`)
            })



            mui('.main-live').on('tap', '.main-sp', function () {
                var id = this.id
                mui.openWindow({
                    url: "detail.html?myid=" + id,
                    id: "detail.html"
                })

            })

        })
        document.querySelectorAll(".mybox").forEach((item, i) => {
            item.addEventListener("click", function () {
                location.href = "./detail2.html"
            })
        })

    </script>
</body>

</html>